<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画属性-animation</title>


    <style>
        .one{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }

        /*动画属性*/
        .one{
            /*这里的name可以自定义，目的是要与下面的同用*/
            animation-name: myname;
            /*设置动画持续时间*/
            animation-duration: 5s;
            /*设置动画的速度和方式*/
            animation-timing-function: linear;
            /*设置动画的重复次数，infinite 表示无限制重复*/
            animation-iteration-count: infinite;
        }

        /*设置动画的运动过程   这里的myname 要与 animation-name 的值一致*/
        @keyframes myname {
            0%{
                background-color: red;
            }

            30%{
                background-color: green;
            }

            60%{
                background-color: blue;
            }

            100%{
                background-color: red;
            }

        }



    </style>

</head>
<body>


<div class="one"></div>

</body>
</html>